<template>
  <div class="conter">
    <div id="container"></div>
    <el-tabs v-model="activeName" @tab-click="handle()">
      <el-tab-pane label="风景" name="风景" class="MapNav">
        <div v-for="(item, index) in pois" :key="index" @mouseover="isshow(item.id)" class="disMap">
          <div class="Mapcont">{{item.name}}</div>
          <div>
            <span>{{item.distance/100}}公里</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="交通" name="交通" class="MapNav">
        <div v-for="(item, index) in pois" :key="index" @mouseover="isshow(item.id)" class="disMap">
          <div class="Mapcont">{{item.name}}</div>
          <div>
            <span>{{item.distance/100}}公里</span>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pois: [],
      activeName: "风景",
      map: {},
      markers: [],
      content: ""
    };
  },

  async mounted() {
    await this.Peripheralhandsearch(); //获取点数据
    this.Promptbox(); //创建地图
    this.Positioning(); //定位
    this.handle();
  },

  methods: {
    //地图
    Promptbox() {
      // 创建地图
      this.map = new AMap.Map("container", {
        // center: [113.3245904, 23.1066805],
        zoom: 21
      });
      this.setmarker();
    },
    //定位
    Positioning() {
      this.$axios({
        url: "https://restapi.amap.com/v3/ip",
        params: {
          key: "e2ee7c0c1acd253af5a8b1227cff90fe"
        }
      }).then(res => {
        console.log(res.data.info);
        if (res.data.info == "OK") {
          this.$message({
            message: "当前定位到" + res.data.city,
            type: "success"
          });
        }
      });
    },
    //周边
    Peripheralhandsearch(activeNamev) {
      var type = activeNamev;
      return this.$axios({
        url: "https://restapi.amap.com/v3/place/around",
        params: {
          key: "e2ee7c0c1acd253af5a8b1227cff90fe",
          location: "113.324590,23.106680",
          types: type,
          radius: "1500"
        }
      }).then(res => {
        this.pois = res.data.pois;
      });
    },
    //放置标点
    setmarker() {
      this.markers = this.pois.map((pis, index) => {
        var marker = new AMap.Marker({
          title: pis.name,
          position: pis.location.split(","),
          extData: pis.id,
          content: `<div class="markerContent"> ${index + 1}</div>`
        });
        marker.on("mouseover", () => {
          return this.isshow(pis.id);
        });
        return marker;
      });
      this.map.add(this.markers);
      this.map.setFitView();
      this.map.on("mouseover", onmouseover); // 绑定click事件
      this.map.on("mouseout", onmouseout);
    },
    //弹窗
    isshow(pisId) {
      this.markers.forEach(el => {
        if (el.getExtData() == pisId) {
          this.map.setCenter(el.getPosition());
          el.setTop(true);

          var infoWindow = new AMap.InfoWindow({
            //创建信息窗体
            isCustom: true, //使用自定义窗体
            offset: new AMap.Pixel(16, -45),

            content: this.content
          });
          infoWindow.open(this.map, el.getPosition());
          // 将点居中
        }
      });
    },
    //tab切换
    async handle() {
      var activeNamev = this.activeName;
      await this.Peripheralhandsearch(activeNamev);
      this.setmarker();
    }
  }
};
</script>

<style lang="less" scoped>
#container {
  height: 260px;
  width: 336px;
}
.info {
  width: 316px;
  font-size: 12px;
  background: white;
  .title {
    background: #f9f9f9;
    font-size: 14px;
    border-bottom: 1px solid #3333;
  }
  .cont {
    display: flex;
    padding: 5px 0;
  }
  .router {
    color: red;
  }
}
.conter {
  display: flex;
}
.img {
  width: 40px;
  height: 40px;
}
.MapNav {
  height: 350px;
  width: 400px;
  overflow: scroll;
  .disMap {
    padding: 0 30px 0 10px;
    display: flex;
    color: #666666;
    line-height: 35px;
    .Mapcont {
      flex: 1;
    }
  }
}
/deep/ .amap-maps {
  .amap-markers {
    .markerContent {
      width: 22px;
      height: 36px;
      background-image: url(https://webapi.amap.com/theme/v1.3/markers/b/mark_b.png);
      background-size: 22px 36px;
      text-align: center;
      line-height: 24px;
      color: #fff;
    }
  }
}
</style>